<template>
	<view class="s-page-wrapper" v-if="showPage">
		<view class="index-goods">
			<view class="swiper">
				<swiper class="swiper-container" :autoplay="true" :interval="4000" :circular="true" :indicator-dots="true"
				 indicator-active-color="#e10a07" indicator-color="#cccccc">
					<block v-for="(item, index) in imageView" :key="index">
						<swiper-item class="swiper-wrapper">
							<image :src="item" mode="widthFix" class="is-response" lazy-load="true" @tap="previewPhoto(index)"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
			<view style="margin: 0 15upx;border-radius: 15upx;background-color: #FFFFFF;">
				<view class="goods_info" style="padding-top: 6px;margin-bottom: 16upx">
					<view class="coupon-price s-row">
						<view class="price" style="width: 70%">
							<text>{{ordersMoney}} <text style="font-size: 28rpx;">积分</text></text>
						</view>
					</view>
					<view style="padding: 16upx 32upx 16upx 16upx;display: flex;">
						<view style="width: 90%;">
							<text style="font-weight: bold">
								<text @longpress="copyTitle">{{ ordersList.title }}</text>
							</text>
						</view>
					</view>
				</view>
			</view>

			<view style="margin: 20upx 15upx;border-radius: 15upx;background-color: #FFFFFF;">
				<view style="width: 100%;padding:20upx 30upx 60upx 30upx;">
					<view style="display: flex;justify-content: space-between;">
						<view class="goods-info-title" style="color:#333333;width: 20%;text-align: center;float:left;">产品参数</view>
					</view>

					<view v-if="ordersList.buyReason" class="goods_reco" style="display: flex;margin-top: 20upx;background-color: #F2F2F2;width: 96%;margin:20upx auto 0;position: relative;border-radius: 8upx;">
						<image src="../../../static/detail/559.png" style="width:14upx;height:12upx;display: block;position: absolute;top:-12upx;left:34upx"></image>
						<view class="goods_desc" style="padding-bottom: 16upx;padding-top:20upx;" @click="TklmaskShow">
							<text>{{ ordersList.buyReason }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="goods_reco" style="margin-top: 20rpx;border-radius: 15upx;" v-if="ordersList.descrition">
				<view class="goods-info-title" style="color: #333;font-weight: bold;">宝贝详情</view>
				<view class="imglist">
					<u-parse :content="ordersList.descrition" @navigate="navigate" class="is-response"></u-parse>
				</view>
			</view>
			<!-- 购买按钮 -->
			<view class="goods_shop_cart">
				<view class="cent" style="display: flex">
					<view style="text-align: center;width: 10%;margin-top: 4px;margin-bottom: 4px;display: flex;margin-left: 15rpx;">
						<view style="width: 90%;text-align: center;" @tap="goBackUp()">
							<image src="https://api.shengqianxiong.com.cn/img/20201112/3e384e9272b545a9828924f3b33eec39.png" style="width: 42upx;height: 44upx;margin-top: 3upx;"></image>
							<view style="font-size: 12px">首页</view>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view style="width: 75%;display: flex;color: white;margin-top: 13rpx;margin-right: 20rpx;margin-left: 50rpx;">
						<view class="getTbk" style="border-radius: 50rpx;width: 100%;background:#FF2222; text-align: center;height: 78rpx;line-height: 78rpx;"
						 @tap="openPopus()">立即购买</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<view style="width: 75%;display: flex;color: white;margin-top: 10upx;margin-right: 20upx;margin-left: 50rpx;">
						<view class="getTbk" style="border-radius: 50rpx;width: 100%;background:#FF2222; text-align: center;height: 78upx;line-height: 78upx;"
						 @tap="openPopus()">立即购买</view>
					</view>
					<!-- #endif -->
				</view>
			</view>

		</view>
		<!-- 淘口令分享 -->
		<simpleModal ref="simpleModalTkl" @maskClose="TklmaskClose">
			<view class="buy-box-title">产品参数</view>
			<view class="buy-box-center" style="width: 600rpx;">
				<view class="code-cent">
					<div class="cente-text">
						<div>
							<view class="textarea">
								{{ ordersList.buyReason }}
							</view>
						</div>
					</div>
				</view>
				<view class="buy-btn-copy" v-bind:class="[copyTklStatus ? 'active' : '', '']" @tap="copyTklWenAns">{{ copyTklStatus ? '已复制到剪切板' : '一键复制' }}</view>
			</view>
		</simpleModal>
		<uni-popup ref="popus" type="bottom">
			<view style="width: 100%;height: max-content;background: #FFFFFF;border-top-left-radius: 20upx;border-top-right-radius: 20upx;padding: 40upx;">
				<view style="display: flex;">
					<image :src="attrValuecoverImg" style="width: 150upx;height: 150upx;"></image>
					<view style="margin-top: 70upx;margin-left: 20upx;">
						<view style="display: flex;">
							<view style="font-size: 28upx;color: #FF4733;"> {{numberMoney}}</view>
							<view v-if="Maxnumber != -1" style="margin-left: 20upx;font-size: 24upx;color: #333333;">库存：{{Maxnumber}}</view>
						</view>
						<view style="font-size: 28upx;color: #333333;margin-top: 10upx;">请选择产品类型</view>
					</view>
				</view>
				<view v-for="(item,index) in attrValue" :key='index'>
					<view style="margin-top: 50upx;font-size: 32upx;color: #000000;">{{item.value}}</view>
					<view style="display: flex;flex-wrap: wrap;flex-wrap: wrap;">
						<view style="display: flex;flex-wrap: wrap;" v-for="(de,ind) in item.detail" @tap='checkState(de,index,ind)'>
							<view :style="item.goodsId == index && item.attrId == ind && de.state != ''?
								'width: 150rpx; height: 50rpx;background: #F2F2F2;text-align: center;border-radius: 50rpx;line-height: 50rpx;margin: 20rpx 0rpx 0rpx 10rpx;border: 1rpx solid #e10a07;'
								: 'width: 150rpx; height: 50rpx;background: #F2F2F2;text-align: center;border-radius: 50rpx;line-height: 50rpx;margin: 20rpx 0rpx 0rpx 10rpx;'">{{de.name}}</view>
						</view>
					</view>
				</view>
				<view style="display: flex;" v-if='ordersList.isExpress === 1'>
					<view style="margin-top: 50upx;font-size: 32upx;color: #000000;width: 80%;">数量</view>
				</view>
				<button style="background: #FF332F;color: #FFFFFF;margin-top: 50upx;" @tap="shopCartShare('quan')">{{ShopCartOrMoney}}</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import simpleModal from '../../../components/simple-pro/customModal.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		data() {
			return {
				erweima: '',
				erweimapath: '',
				ordersId: 0,
				number: 1,
				Maxnumber: -1,
				shoucang: true,
				shoucangId: '',
				modalName: '',
				ShopCartOrMoney: '立即购买',
				ordersMoney: 0,
				numberMoney: 0,
				buyDes: '口令购买',
				shengji: '',
				attrValue: [],
				showPage: false,
				goods: '',
				relation: false,
				brandName: '',
				numberMoney1: 0,
				scrollTop: false,
				checkStateList: [],
				navBarButton: false,
				copyTklStatus: false,
				attrValuecoverImg: '',
				XCXErweima: '',
				icon: '',
				total: 0,
				CheckattrValue: false,
				save: false,
				tkl: '',
				relation_id: null,
				money: 0,
				grade: '',
				groupPinkId: '',
				isInvitation: 0,
				skuId: 0,
				imageView: [],
				userId: '',
				ordersList: {},
				checkString: '',
			};
		},
		components: {
			simpleModal,
			tkiQrcode
		},
		onShow: function() {
			this.copyTklStatus = false;
		},
		onLoad: function(e) {
			this.$queue.showLoading("加载中...")
			if (e.ordersId) {
				this.ordersId = e.ordersId;
				this.getCommondityList(e.ordersId);
			}

			let userId = this.$queue.getData('userId');
			if (userId) {
				this.$Request.getT('/user/' + userId).then(res => {
					if (res.status === 0) {
						if (res.data.isInvitation) {
							this.isInvitation = res.data.isInvitation;
							this.$queue.setData('isInvitation', res.data.isInvitation);
						}
						this.total = parseFloat(res.data.orderJifen).toFixed(0);
						this.$queue.setData('relation', res.data.invitation);
						this.$queue.setData('grade', res.data.grade);
						this.$queue.setData('pddpid', res.data.pdd);
						this.$queue.setData('jdpid', res.data.jd);
						if (res.data.image_url) {
							this.$queue.setData('image_url', res.data.image_url);
						}
						this.$queue.setData('mobile', res.data.phone);

						this.$queue.setData('nickName', res.data.nickName);
						this.$queue.setData('relation_id', res.data.relationId);
						this.$queue.setData('gender', parseInt(res.data.gender));
					}
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		methods: {
			checkState(item, index, ind) {
				this.number = 1;
				this.attrValue[index].detail.forEach(d => {
					d.state = '';
				})

				this.checkStateList[index].name = item.name;
				this.attrValue[index].goodsId = index;
				this.attrValue[index].attrId = ind;
				this.attrValue[index].detail[ind].state = '123';
				this.checkString = '';
				this.checkStateList.forEach(d => {
					if (d.name) {
						if (this.checkString) {
							this.checkString = this.checkString + ',' + d.name;
						} else {
							this.checkString = d.name;
						}

					}
				});
				for (var i = 0; i < this.ordersList.sku.length; i++) {
					let d = this.ordersList.sku[i];
					if (d.detailJson == this.checkString) {
						if (d.stock > 0) {
							this.numberMoney = d.skuPrice;
							this.numberMoney1 = d.skuPrice;
							this.Maxnumber = d.stock;
							this.skuId = d.id;
							this.attrValuecoverImg = d.skuImg;
							this.CheckattrValue = true;
						} else {
							this.Maxnumber = 0;
							this.$queue.showToast('库存不足请选择其他的类型')
						}
						break
					} else {
						this.CheckattrValue = false;
					}
				}
			},
			openPopus() {
				let token = this.$queue.getData('token');
				let userId = this.$queue.getData('userId');
				if (token) {
					this.ShopCartOrMoney = '立即购买';
					if (this.ordersList.attr.length === 0) {
						this.shopCartShare('quan');
					} else {
						this.$refs.popus.open();
					}
				} else {
					this.loginS();
				}
			},
			hindPopus() {
				this.$refs.popus.close();
				this.groupPinkId = '';
			},
			navigate(href, e) {
				// #ifdef H5
				window.location.href = href;
				//#endif

				//#ifdef APP-PLUS
				setTimeout(function() {
					plus.runtime.openURL(href);
				}, 500);
				// #endif
			},
			shopCartShare: function(type) {
				let token = this.$queue.getData('token');
				let userId = this.$queue.getData('userId');
				if (token) {
					if (this.total >= this.numberMoney) {
						if (this.ordersList.attr.length > 0) {
							if (this.checkString != '') {
								uni.navigateTo({
									url: '/pages/zysc/member/order?className=jifen&id=' + this.ordersId + '&numberMoney=' + this.numberMoney1 +
										'&checkString=' +
										this.checkString +
										'&number=' + this.number + '&money=' + this.numberMoney + '&skuId=' + this.skuId + '&attrValuecoverImg=' +
										this.attrValuecoverImg
								});
							} else {
								this.$queue.showToast('请选择商品规格！');
							}
						} else {
							var money = this.ordersList.sku[0].skuPrice;
							uni.navigateTo({
								url: '/pages/zysc/member/order?className=jifen&id=' + this.ordersId + '&money=' + money
							});
						}
					} else {
						this.$queue.showToast('积分不足无法购买');
					}
				} else {
					this.loginS();
				}
			},
			getCommondityList(id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$Request.getT('/goods/find?id=' + id).then(res => {
					if (res.status === 0) {
						this.imageView = [];
						this.ordersList = {};
						this.ordersMoney = res.data.price;
						this.numberMoney = res.data.price;
						if (res.data.attr.length > 0) {
							this.attrValue = [];
							res.data.attr[0].attrValue.forEach(d => {
								let data = {
									name: ''
								}
								this.checkStateList.push(data);
								let detail = [];
								d.detail.split(',').forEach(d => {
									let data = {
										name: '',
										state: ''
									}
									data.name = d;
									detail.push(data);
								});
								d.detail = detail;
								d.attrId = '';
								d.goodsId = '';
								this.attrValue.push(d);
							});
						}
						if (res.data.brand) {
							this.brandName = res.data.brand.brandName;
						}
						this.ordersList = res.data;
						this.imageView = res.data.img.split(',');
						this.attrValuecoverImg = res.data.coverImg;
					}
					uni.hideLoading();
					this.showPage = true;
				});
			},
			TklmaskClose: function(e) {
				this.$refs.simpleModalTkl.hide();
				this.copyTklStatus = false;
			},
			TklmaskShow: function(e) {
				this.$refs.simpleModalTkl.show({
					showConfirmButton: false
				});
			},
			copyTklWenAns: function() {
				uni.setClipboardData({
					data: this.ordersList.buyReason,
					success: r => {
						this.$queue.showToast('复制成功')
						this.copyTklStatus = true;
					}
				});
			},
			/**
			 * 返回
			 */
			goBackUp() {
				uni.navigateBack();
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			loginS() {
				uni.navigateTo({
					url: '/pages/member/register'
				});
			},
			copyTitle: function() {
				uni.setClipboardData({
					data: this.goods.title,
					success: r => {
						this.$queue.showToast('复制成功');
					}
				});
			}
		}
	};
</script>

<style scoped>
	@import '../../../static/css/index.css';

	page {
		background: #f8f8f8;
	}

	.swiper-container {
		min-height: 100vw;
	}

	button {
		font-size: 14px;
	}

	button::after {
		border: none;
	}

	.swiper-wrapper {
		width: 100%;
	}
</style>
